<template>
  <div>
    <form-container label="名称" />
    <!-- @submit="submitForm" @resetForm="resetForm" -->
    <div class="table">
      <el-row>
        <!-- <router-link to="./adduser"> -->
        <el-button type="primary" @click="toadduser">新增用户</el-button>
        <!-- </router-link> -->
      </el-row>
      <el-table :data="lists" style="width: 100%">
        <el-table-column prop="name" label="名称" />
        <el-table-column label="用户名">
          <template slot-scope="lists">
            <!-- <router-link
              class="option-span"
              :to="`/privilegeManagement/account/opiModel?id=${lists.row.id}`"
            > -->
            {{ lists.row.username }}
            <!-- </router-link> -->
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="联系方式" />
        <el-table-column prop="parentName" label="上级用户" />
        <el-table-column prop="groupName" label="分组" />
        <el-table-column prop="clientName" label="所属组织" />
        <el-table-column prop="state" label="账号状态" />
        <el-table-column prop="admin" label="是否管理员">
          <template slot-scope="list">
            <span>{{ list.row.admin?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="roleName" label="角色名">
          <template slot-scope="list">
            <span v-if="!list.row.admin">{{ list.row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="locationCount" label="场地数">
          <template slot-scope="list">
            <span>{{ list.row.locationCount||0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deviceCount" label="设备数">
          <template slot-scope="list">
            <span>{{ list.row.deviceCount||0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间" />
        <el-table-column width="300px" fixed="right" label="操作">
          <template slot-scope="lists">
            <span
              v-if="!isAuthorized&&!lists.row.admin"
              size="small"
              class="option-span"
              style="margin: 0 5px;"
            >授权场地</span>
            <span
              v-if="!isAuthorized&&!lists.row.admin"
              size="small"
              class="option-span"
              style="margin: 0 5px;"
            >授权设备</span>
            <span
              type="text"
              size="small"
              class="option-span"
            >
              <span>{{ lists.row.enabled?"禁用":"启用" }}</span>
            </span>
            <span
              size="small"
              class="option-span"
              style="margin: 0 5px;"
            >修改密码</span>
            <span
              v-if="lists.row.canDelete"
              type="text"
              size="small"
              class="option-span"
            >删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <!-- <el-pagination
          background
          :page-size="params.size"
          :current-page="page"
          layout="total,prev, pager, next"
          :total="count"
          @current-change="currentChange"
        /> -->
      </div>
    </div>

    <el-dialog title="修改密码" width="300px" :visible.sync="isPassword">
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="密码"
          prop="password"
          :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"
        >
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="confirmPassword"
          :rules="[{required: true, message: '不能为空', trigger: 'blur'}]"
        >
          <el-input v-model="ruleForm.confirmPassword" type="password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isPassword = false">取消</el-button>
        <el-button type="primary" @click="determine('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   GET_ACCOUNT_LIST,
//   COUNT_ACCOUNT_LIST,
//   PASSWORD_ACCOUNT_LIST,
//   DELETE_ACCOUNT_LIST,
//   ENABLE_ACCOUNT_LIST,
//   DISABLE_ACCOUNT_LIST
// } from '@/api/privilegeManagement';

// import { GET_clientsSel } from '@/api/common';

// import Alert from '@/utils/alert';
// import { pageSize } from '../../../config';
// import { dateTimeFormate } from '@/filters/index';
// import { getCookie } from '@/utils/cookie.js';
// import { getRequestParam } from '../../../utils/dom';

const FormContainer = () => import('./form.vue')

export default {
  name: 'ProductList',
  components: {
    FormContainer
  },
  data() {
    return {
      isLoading: false,
      hackReset: true,
      isPassword: false,
      isAuthorized: false,
      lists: [],
      count: 0,
      id: '',
      // params: {
      //   from: 0
      //   size: pageSize
      // },
      ruleForm: {
        password: '',
        confirmPassword: ''
      },
      groupId: ''
    }
  },
  // computed: {
  //   page: function() {
  //     return parseInt(this.params.from / this.params.size) + 1
  //   }
  // },
  // mounted() {
  //   var groupId = getRequestParam(document.location.href, 'groupId')
  //   if (groupId) {
  //     this.groupId = groupId
  //   }
  //   this.params = {
  //     ...this.params,
  //     groupId: this.groupId,
  //     clientId: this.$route.query.clientId
  //   }
  //   this.getList()
  //   this.getCount()

  //   let permissions = getCookie('permissions')
  //   if (permissions) {
  //     const admin = JSON.parse(permissions)
  //     this.isAuthorized = !admin.admin
  //   }
  // },
  methods: {
    toadduser() {
      this.$router.push({ path: 'adduser' })
    }
    //   /**
    //    * 获取列表数据
    //    */
    //   getList() {
    //     GET_ACCOUNT_LIST(this.params).then(res => {
    //       res.map(item => {
    //         item.state = item.enabled == true ? '启用' : '禁用';
    //         item.createdDate = dateTimeFormate(item.createdDate)
    //         return item
    //       })
    //       this.lists = res
    //     })
    //   },

    //   /**
    //    * 获取总数
    //    */
    //   getCount() {
    //     COUNT_ACCOUNT_LIST(this.$route.query.clientId || '', this.params).then(
    //       res => {
    //         this.count = res
    //       }
    //     )
    //   },

    //   /**
    //    * 查询
    //    */
    //   submitForm(res) {
    //     this.params = {
    //       ...this.params,
    //       from: 0,
    //       size: pageSize,
    //       clientId: res.clientId,
    //       ...res
    //     }
    //     this.getList()
    //     this.getCount()
    //   },

    //   /**
    //    * 重置
    //    */
    //   resetForm() {
    //     this.params = {
    //       from: 0,
    //       size: pageSize,
    //       query: '',
    //       clientId: ''
    //     }
    //     this.getList()
    //     this.getCount()
    //   },

    //   /**
    //    * 翻页
    //    */
    //   currentChange(res) {
    //     this.params = {
    //       ...this.params,
    //       from: parseInt(res - 1) * this.params.size,
    //       size: pageSize,
    //       groupId: this.groupId
    //     }
    //     this.getList()
    //   },

    //   /**
    //    * 删除商品
    //    */
    //   removeItem(id) {
    //     this.$confirm('确定删除此商品嘛？', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     })
    //       .then(() => {
    //         const params = {
    //           id
    //         }
    //         DELETE_ACCOUNT_LIST(params).then(res => {
    //           const lists = []
    //           this.lists.map(item => {
    //             if (item.id != id) {
    //               lists.push(item)
    //             }
    //             return item
    //           })
    //           this.lists = lists
    //         })
    //         Alert.success('删除成功')
    //       })
    //       .catch(() => {})
    //   },

    //   /**
    //    * 编辑商品
    //    */
    //   editItem(id) {
    //     this.hackReset = true
    //     this.id = id
    //   },

    //   suspensionOfRelease(id, enabled) {
    //     if (enabled) {
    //       this.PUBLISHED(id)
    //     } else {
    //       this.PAUSEDANDPENDING(id)
    //     }
    //   },
    //   /**
    //    * 已发布
    //    * @constructor
    //    */
    //   PUBLISHED(id) {
    //     const params = {
    //       id
    //     }
    //     DISABLE_ACCOUNT_LIST(params).then(res => {
    //       const lists = []
    //       this.lists.map(item => {
    //         if (item.id == id) {
    //           item.state = '禁用';
    //           item.enabled = false
    //         }
    //         lists.push(item)
    //         return item
    //       })
    //       this.lists = lists
    //       Alert.success('已禁用')
    //     })
    //   },
    //   /**
    //    * 已暂停或者待发布
    //    * @constructor
    //    */
    //   PAUSEDANDPENDING(id) {
    //     const params = {
    //       id
    //     }
    //     ENABLE_ACCOUNT_LIST(params).then(res => {
    //       const lists = []
    //       this.lists.map(item => {
    //         if (item.id == id) {
    //           item.state = '启用';
    //           item.enabled = true
    //         }
    //         lists.push(item)
    //         return item
    //       })
    //       this.lists = lists
    //       Alert.success('已启用')
    //     })
    //   },

    //   changePassword(id) {
    //     this.isPassword = true
    //     this.id = id
    //   },

    //   authorizedSite(id) {
    //     this.$router.push('/privilegeManagement/account/authorizedSite?id=' + id)
    //   },
    //   authorizedEquipment(id) {
    //     this.$router.push(
    //       '/privilegeManagement/account/authorizedEquipment?id=' + id
    //     )
    //   },
    //   /**
    //    * 确定保存
    //    */
    //   determine(formName) {
    //     const that = this
    //     this.$refs[formName].validate(valid => {
    //       if (valid) {
    //         if (that.ruleForm.password.length < 6) {
    //           Alert.fail('密码至少6位')
    //           return false
    //         }
    //         if (that.ruleForm.password != that.ruleForm.confirmPassword) {
    //           Alert.fail('密码不一致')
    //           return false
    //         }
    //         const params = {
    //           id: that.id,
    //           password: that.ruleForm.password
    //         }

    //         PASSWORD_ACCOUNT_LIST(params).then(res => {
    //           Alert.success('修改成功')
    //         })
    //         that.isPassword = false
    //       }
    //     })
    //   },

  //   /**
  //    * 取消弹层
  //    */
  //   resetFormDialog() {
  //     this.hackReset = false // 销毁组件
  //     this.$refs['commodityDetails'].$refs['ruleForm'].resetFields()
  //   }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.table {
  margin-top: 20px;
  padding: 30px;
  background: #fff;

  .option-span {
    color: #409eff;
    cursor: pointer;
  }
}

.pagination {
  margin-top: 20px;
}
</style>
